<template>
  <!-- 
  病人详情点击跳转逻辑：
    详情点击函数传入参数(当前点击对象的id),通过query
    传递给Pmore页面，Pmore通过获取url上面携带的id参数在
    created里绑定到data中的 "id"参数中，调用接口，获取
    对应数据，最后render page。
 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="住 院 病 人 管 理">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goBack">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>
    <!-- 搜索 -->
    <van-search
      v-model="searchTxt"
      show-action
      placeholder="请输入病人姓名"
      @clear="onCancel"
      @search="onSearch"
      @cancel="onCancel"
    />
    <!-- 内容区域 -->
    <div class="content">
      <div class="patientBox">
        <ul>
          <li v-for="(item, index) in dataList" :key="index">
            <div class="listInner">
              <div class="brief">
                <p>姓名：{{ item.name }}</p>
                <p>年龄：{{ item.age }}</p>
                <p>性别：{{ item.sex }}</p>
                <p>身份证：{{ item.idcard }}</p>
                <p>病情描述：{{ item.description }}</p>
              </div>
              <div class="more">
                <span @click="goMore(item.id)" class="moreBtn">详情</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PatientManagement",

  data() {
    return {
      searchTxt: "", //搜索字段
      //住院病人信息列表
      dataList: [],
    };
  },

  mounted() {},

  created() {
    //获取病人信息列表
    this.getList();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "./index",
      });
    },
    goMore(id) {
      this.$router.push({
        path: "./patientMore",
        query: { id },
      });
    },

    //获取住院病人信息列表
    getList() {
      this.$http.get("hospitalization-register", {}).then((res) => {
        console.log(res);
        this.dataList = res.data.data;
      });
    },
    //搜索取消
    onCancel() {
      this.getList();
    },
    //搜索
    onSearch() {
      this.$http
        .get("hospitalization-register", {
          params: {
            username: this.searchTxt,
          },
        })
        .then((res) => {
          console.log(res);
          this.dataList = res.data.data;
        });
    },
    //出院按钮
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
.content {
  padding-bottom: 45px;
}
.listInner {
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  .more {
    flex: 1;
    text-align: right;
    .moreBtn {
      font-weight: 700;
      display: block;
      text-align: center;
      color: #45aaf2;
    }
  }
}
.Btn {
  position: fixed;
  width: 100%;
  bottom: 0;
}
</style>